<template>
	<div class="list">
		<view class="list-item" v-for="(item,index) in list" :key="index">
			<image :src="item.agentIcon"></image>
			<view class="row">
				<view class="row_item">
					ID:{{item.agentId}}
				</view>
				<view class="row_item">
					TYPE:{{item.agentName}}
				</view>
			</view>
			<view class="row">
				<view class="row_item">
					姓名:{{item.trueName}}
				</view>
				<view class="row_item">
					userName:{{item.userName}}
				</view>
			</view>
			
			<view class="row">
				<view class="row_item">
					role:{{item.role}}
				</view>
				<view class="row_item">
					shareRate:{{item.shareRate}}
				</view>
			</view>
			
			<view class="row">
				<view class="row_item">
				email:{{item.email}}
				</view>
				<view class="row_item">
				</view>
			</view>
			<view class="row">
				<view class="btns">
					<view class="btn" style="background-color:#409eff ;">
						编辑
					</view>
					<view class="btn" style="background-color:#f56c6c ;">
						删除
					</view>
					<view class="btn" style="background-color:#67c23a ;">
						资源管理
					</view>
				</view>
			</view>
		</view>
	</div>
</template>

<script>
	import {
		getList
	} from '../../api/daili';

	export default {
		data() {
			
			// {{item.device.deviceLogo}}
			// {{item.device.deviceName}}
			return {
				list: [],
				params: {
					deviceId: null,
					page: 1,
					limit: 10,
				}
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			async init() {
				const res = await getList(this.params)
				if (res.code == 200) {
					console.info(res.data, '-------------------')
					this.list = res.data

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		padding: 25rpx;
		.list-item {
			padding: 20rpx;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
			overflow: hidden;
			box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border:1px solid #dadada;
			}
			.row{
				display: flex;
				margin-bottom: 10rpx;
				flex-direction: row;
				.row_item{
					font-size: 24rpx;
					width: 50%;
					color: #686868;
				}
				.btns{
					display: flex;
					flex-direction: row;
					margin-top: 20rpx;
					justify-content: flex-end;
					width: 100%;
					.btn{
						width: 100rpx;
						height: 40rpx;
						border-radius: 5rpx;
						background: red;
						color: #fff;
						text-align: center;
						margin: 0 10rpx;
						line-height: 40rpx;
						font-size: 20rpx;
					}
					
				}
			}
		}
	}
</style>